<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <hello-world />
    </div>
    <div>
      <p>第二题</p>
      <hello-world :tname />
    </div>
    <div>
      <p>第三题</p>
      <button-counter @upBC="jsbtc" />
      父组件中的计数值: {{ BCcount }}
    </div>
    <div>
      <p>第四题</p>
      <Card #four />
    </div>
    <div>
      <p>第五题</p>
      <user-profile @fivefn="parentfn" />
      <div v-if="fshow">
        <h3>接收到的用户信息</h3>
        <br />
        用户名: {{ fuser.uname }} <br />
        邮箱: {{ fuser.email }}
      </div>
    </div>
    <div>
      <p>第六题</p>
      <Tab />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import HelloWorld from './componentslx/HelloWorld.vue'
import ButtonCounter from './componentslx/ButtonCounter.vue'
import Card from './componentslx/Card.vue'
import UserProfile from './componentslx/UserProfile.vue'
import Tab from '@/views/componentslx/Tab.vue'

let tname = reactive(['李焕英!', '生命一号!', '希望一号!', '神州20号!'])
let BCcount = ref(0)
function jsbtc(count) {
  BCcount.value = count
}
let fuser = ref({})
let fshow = ref(false)
function parentfn(data) {
  fshow.value = true
  fuser.value = data
}
</script>
